{% extends 'base.html' %}
{% block title %}
    <title>书库</title>
{% endblock %}

{% block css %}
<style>
    .whole_book{
        display: flex;
        margin: 30px 0;
    }
    .whole_book img{
        width: 110px;
        height: 150px;
    }
</style>
{% endblock %}

{% block body %}

<div>
   <ul class="nav nav-tabs" role="tablist">

    <li role="presentation" class="active"><a href="#whole"  aria-controls="whole" role="tab" data-toggle="tab">全部</a></li>
    {% for book_channel in book_channels %}
    <li role="presentation"><a href="#query"  class="type_other_channel type_other" aria-controls="query" role="tab" data-toggle="tab">{{ book_channel }}</a></li>
    {% csrf_token %}
    {% endfor %}
    
  </ul>
     <ul class="nav nav-tabs" role="tablist">

    <li role="presentation" class="active"><a href="#whole"  aria-controls="whole" role="tab" data-toggle="tab">全部</a></li>
    {% for book_category in book_categorys %}
    <li role="presentation"><a href="#query"  class="type_other_category type_other" aria-controls="query" role="tab" data-toggle="tab">{{ book_category }}</a></li>
    {% csrf_token %}
    {% endfor %}

  </ul>
     <ul class="nav nav-tabs" role="tablist">

    <li role="presentation" class="active"><a href="#whole"  aria-controls="whole" role="tab" data-toggle="tab">全部</a></li>
    {% for book_wordcount in book_wordcounts %}
    <li role="presentation"><a href="#query"  class="type_other_wordcount type_other" aria-controls="query" role="tab" data-toggle="tab">{{ book_wordcount }}</a></li>
    {% csrf_token %}
    {% endfor %}

  </ul>

  <!-- Tab panes -->
  <div class="tab-content">

    <div role="tabpanel" class="tab-pane active" id="whole">
        <div>
{% for book in books %}
            <div class="col-md-4 whole_book">
                <div><img src="/media/{{ book.image.image }}" alt=""></div>
                <div>
                    <span><a href="/detail/{{ book.id }}">{{ book.title }}</a></span>
                    <span>{{ book.update_time }}</span>
                    <span>{{ book.category.title }}</span>
                    <span>{{ book.channel.title }}</span>
                    <span>{{ book.word_count.title }}字</span>
                    <span><a href="">{{ book.author.title }}</a></span>
                </div>
            </div>
{% endfor %}
        </div>

    </div>


    <div role="tabpanel" class="tab-pane" id="query">
        <div id="data-container">
            {{ books_shiyan }}
        {% for book in books1 %}
            <div class="col-md-4 whole_book">
                <div><img src="/media/{{ book.image.image }}" alt=""></div>
                <div>
                    <span><a href="/detail/{{ book.id }}">{{ book.title }}</a></span>
                    <span>{{ book.update_time }}</span>
                    <span>{{ book.word_count.title }}字</span>
                    <span><a href="">{{ book.author.title }}</a></span>
                </div>
            </div>
        {% endfor %}
        </div>
    </div>

  </div>

</div>

{% endblock %}


{% block js %}
<script>
$(function(){
    $(".type_other_channel").click(function(){
      if("{{ request.user.id }}"=="None"){
        location.href = "/user/login?next=/bookstore/"
        return ;
      }
      var book_channel = $(this).text();
      
      $.ajax({
        url: "/bookstore/",
        method: "post",
        data:{
         "csrfmiddlewaretoken": $("[type='hidden']").val(),
          "channel_title": book_channel,
        },
        success: function(response) {
          console.log(response)
        }
      });
    })
  })
  $(function(){
    $(".type_other_category").click(function(){
      if("{{ request.user.id }}"=="None"){
        location.href = "/user/login?next=/bookstore/"
        return ;
      }
      var book_category = $(this).text();

      $.ajax({
        url: "/bookstore/",
        method: "post",
        data:{
         "csrfmiddlewaretoken": $("[type='hidden']").val(),
          "category_title": book_category,
        },
        success: function(response) {
          console.log(response)
        }
      });
    })
  })
$(function(){
    $(".type_other_wordcount").click(function(){
      if("{{ request.user.id }}"=="None"){
        location.href = "/user/login?next=/bookstore/"
        return ;
      }
      var book_wordcount = $(this).text();

      $.ajax({
        url: "/bookstore/",
        method: "post",
        data:{
         "csrfmiddlewaretoken": $("[type='hidden']").val(),
          "wordcount_title": book_wordcount,
        },
        success: function(response) {
          console.log(response)
        }
      });
    })
  })
</script>
{% endblock %}